<template>
  <div class="rank-list">
    <div class="rank-wrap" v-loading="isLoading">
      <div class="module">
        <div class="title">云音乐特色榜</div>
        <ul class="list">
          <li class="item" v-for="(item, index) in featureList" :key="index">
            <div class="wrapper">
              <a href="javascript:void(0);">
                <div class="cover">
                  <el-image :src="item.coverImgUrl">
                    <template slot="placeholder" class="image-slot">
                      <img
                        src="../../assets/images/timg.jpg"
                        alt=""
                      /> </template
                  ></el-image>
                  <div class="count">
                    <i class="iconfont icon-play1"></i
                    ><span>{{ item.playCount | filterPlayCount }}</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="info">
              <h2 class="name">{{ item.name }}</h2>
            </div>
          </li>
        </ul>
      </div>
      <div class="module">
        <div class="title">全球媒体榜</div>
        <ul class="list">
          <li class="item" v-for="(item, index) in rankList" :key="index">
            <div class="wrapper">
              <a href="javascript:void(0);">
                <div class="cover">
                  <el-image :src="item.coverImgUrl">
                    <template slot="placeholder" class="image-slot">
                      <img src="../../assets/images/timg.jpg" /> </template
                  ></el-image>
                  <div class="count">
                    <i class="iconfont icon-play1"></i
                    ><span>{{ item.playCount | filterPlayCount }}</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="info overflow2">
              <h2 class="name">{{ item.name }}</h2>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getRankList } from '@/api/rank'
export default {
  name: 'rank-list',
  data () {
    return {
      featureList: [],
      rankList: [],
      isLoading: true
    }
  },
  methods: {},
  created () {
    getRankList().then(res => {
      const _rankList = res.list
      this.featureList = _rankList.splice(0, 4)
      this.rankList = _rankList
      this.isLoading = false
    })
  }
}
</script>
<style lang="less" scoped>
.rank-list {
  padding: 20px 0;
  .rank-wrap {
    width: 1380px;
    margin: 0 auto;
    .module {
      .title {
        position: relative;
        font-size: 16px;
        font-weight: 600;
        padding-left: 30px;
        color: #121212;
        margin-bottom: 20px;
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 15px;
          width: 5px;
          height: 20px;
          background-color: @main-font-color;
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          max-width: 12.5%;
          padding: 0 15px 30px;
          cursor: pointer;
          .wrapper {
            width: 100%;
            position: relative;
            padding-right: 10px;
            a {
              display: block;
              text-decoration: none;
              color: #161e27;
              overflow: hidden;
              &:hover .el-image {
                transform: scale(1.2);
              }
              div.cover {
                .el-image {
                  width: 100%;
                  height: 132.5px;
                  border-radius: 2px;
                  display: block;
                  transition: transform 0.6s;
                  img {
                    width: 100%;
                    height: 100%;
                    display: block;
                  }
                }
                .count {
                  position: absolute;
                  top: 5px;
                  right: 15px;
                  height: 20px;
                  line-height: 20px;
                  padding: 0 10px;
                  background-color: rgba(0, 0, 0, 0.3);
                  color: #fff;
                  font-size: 12px;
                  border-radius: 12.5px;
                  i {
                    font-size: 12px;
                  }
                  span {
                    padding-left: 4px;
                  }
                }
              }
            }
          }
          .info {
            margin-top: 10px;
            h2.name {
              margin: 0;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
